shopline安装心愿清单插件后,想要在自己的模块添加心愿清单按钮可以通过以下实现
全部代码:product-card.html
{{assign "jump_link" product.url}}
{{#capture "default_variant_id"}}
{{default product.selected_or_first_available_variant.id (get "id" (first product.variants))}}
{{/capture}}
{{assign "product_form_id" (append "quick-add-" section.id "__" product.id)}}
{{!-- <div class="product-art-right-box swiper-slide card card-wrapper
data-product-id="{{product.id}}"
data-product-form-id="{{product_form_id}}"
"> --}}
<div class="product-art-right-box swiper-slide product-card-wrapper card card-wrapper product-card-style-{{card_style}}
{{#if card_style == 'card'}} global-product-card-border-shadow{{/if}}"
data-product-form-id="{{product_form_id}}"
style="--card-image-padding: {{card_image_padding}}px;
--color-card-background: {{card_background_color}};
--color-card-text: {{card_text_color}};">
<a {{#if jump_link}}href="{{jump_link}}"{{else}}href="javascript:;"{{/if}} class="full-unstyled-link">
<span class="visually-hidden">
{{#if product_data}}
{{product_data.title}}
{{else}}
{{t "onboarding.product_title"}}
{{/if}}
</span>
</a>
<a href="{{#if jump_link}}{{jump_link}}{{else}}javascript:;{{/if}}" class="card__media ">
<a href="{{product.url}}">
<div class="product-image-right-box">
<img src="{{image_url product.featured_image height=1040}}" alt="{{product.title}}" />
{{!-- <div class="product-right-favorite-icon" onclick="toggleFavorite(this)" data-product-id="{{ product.id }}">
{{snippet "heart"}}
</div> --}}
</div>
{{#if product.available}}
<div class="product-right-sale-status">Sale</div>
{{else}}
<div class=" product-right-sale-status-out">Sold out</div>
{{/if}}
<div class="mb_padding-bottom">
<p class="product-right-product-title">{{product.title}}</p>
<p class="product-right-product-description">
{{product.metafields.secondtitle.secondtitle.value}}
</p>
<div class="product-right-reviews display-none">
<div class="product-right-stars">★★★★★</div>
<div class="product-right-review-count">6 reviews</div>
</div>
<div class="product-right-cart-module">
<div class="product-right-prices">
{{#if product.compare_at_price}}<div class="product-right-original-price">{{money product.compare_at_price}}</div>{{/if}}
<div class="product-right-current-price">{{money (floor product.price)}}</div>
</div>
{{!-- {{#for product.variants as |var|}}
{{var.id}}-{{var.title}}
{{/for}}
productid:{{product.id}} --}}
<product-form
id="{{append product_form_id '__wrapper'}}"
class="product-form"
data-default-error-message="{{t 'products.general.no_product_data_found'}}"
>
<form method="post" action="/api/carts/ajax-cart/add.js" id="productFrom" id={{product_form_id}}>
<input type="number" required step="1" form="product-form-{{section.id}}" name="quantity" min='1' max='999' value='1'/ hidden>
<input type="hidden" name="id" value="{{default product.selected_or_first_available_variant.id (get 'id' (first product.variants))}}" disabled class="ids"/>
<button class="product-right-cart-button" type="submit" name="add" id="{{product_form_id}}-submit">
{{snippet "carticon"}}
</button>
<div class="loading-overlay__spinner ">
<svg class="icon icon-loading" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.3337 9.99984C18.3337 14.6022 14.6027 18.3332 10.0003 18.3332C5.39795 18.3332 1.66699 14.6022 1.66699 9.99984C1.66699 5.39746 5.39795 1.6665 10.0003 1.6665" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></path>
</svg>
</div>
</form>
</product-form>
</div>
</div>
</a>
</a>
</div>
关键代码:
{{assign "jump_link" product.url}}
<div class="product-art-right-box swiper-slide product-card-wrapper card card-wrapper product-card-style-{{card_style}}
{{#if card_style == 'card'}} global-product-card-border-shadow{{/if}}"
data-product-form-id="{{product_form_id}}"
style="--card-image-padding: {{card_image_padding}}px;
--color-card-background: {{card_background_color}};
--color-card-text: {{card_text_color}};">
<a {{#if jump_link}}href="{{jump_link}}"{{else}}href="javascript:;"{{/if}} class="full-unstyled-link">
<span class="visually-hidden">
{{#if product_data}}
{{product_data.title}}
{{else}}
{{t "onboarding.product_title"}}
{{/if}}
</span>
<a href="{{#if jump_link}}{{jump_link}}{{else}}javascript:;{{/if}}" class="card__media ">
<img src="{{image_url product.featured_image height=1040}}" alt="{{product.title}}" />
</a>
</a>
</div>