Legg til et alternativ for gaveinnpakking på handlekurvsiden
Denne siden ble skrevet ut den Mar 29, 2024. Gå til https://help.shopify.com/nb/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-gift-wrap-option for nyeste versjon.
Advarsel
Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer , og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.
Merk
Hvis du bruker et gratis tema fra Shopify , kan det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer– .
Merk
Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.
Du kan tilby en gaveinnpakkingstjeneste til kundene dine på handlekurvsiden i nettbutikken. For kunder som ønsker bestillingen sin innpakket kan du enten belaste en fastpris, eller belaste per produkt.
Advarsel
Denne tilpasningen vil ikke fungere for handlekurvstilene skuff eller popup, og vil bare fungere for en handlekurvside (på URL-adressen your-store.com/cart
). Hvis du bruker en handlekurvskuff eller popup, må du endre handlekurvstilen til Side i temaredigeringsprogrammet . Legg til et produkt i handlekurven i temaforhåndsvisningen, og klikk så på Handlekurvside -fanen i temaredigeringsprogrammet for å vise handlekurvinnstillingene.
Opprett et gaveinnpakkingsprodukt Først oppretter du alternativet for gaveinnpakking som produkt:
Fra Shopify-administratoren går du til Produkter .
Klikk på Legg til produkt .
Opprett et gaveinnpakkingsprodukt på samme måte som du oppretter et hvilket som helst annet produkt :
Du kan bruke produktbeskrivelsen til å forklare hva slags materialer som brukes til innpakningen.
Gi gaveinnpakkingsproduktet den prisen du ønsker å belaste for tjenesten. Hvis du ønsker at innpakking skal være gratis, angir du prisen for gaveinnpakkingsproduktet til 0
.
Du kan laste opp et bilde for produktet for å vise kundene hvordan en innpakket bestilling ser ut.
Sørg for at gaveinnpakkingsproduktet inkluderer lagerbeholdning, eller juster innstillingene slik at Shopify ikke sporer lagerbeholdning for gaveinnpakkingsproduktet. Hvis butikken din har flere lokalisasjoner, fjerner du avkrysningen for Spor antall for å forhindre at Shopify sporer lagerbeholdningen for gaveinnpakkingsproduktet.
Klikk på Lagre .
Opprett en meny Deretter oppretter du en meny som peker på gaveinnpakkingsproduktet:
Fra Shopify-administratoren går du til Nettbutikk > Navigasjon .
Klikk på Legg til meny .
Navngi menyen Gift wrapping
, slik at referansen som er tilordnet menyen er gift-wrapping
.
Legg til gaveinnpakkingsproduktet i menyen:
Klikk på Legg til menyelement , og angi et Navn for koblingen til gaveinnpakkingsproduktet.
I Kobling -feltet velger du Produkter , og velger deretter gaveinnpakkingsproduktet fra rullegardinmenyen.
Klikk på Legg til .
Klikk på Lagre meny .
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Navigasjon .
Klikk på Legg til meny .
Navngi menyen Gift wrapping
, slik at referansen som er tilordnet menyen er gift-wrapping
.
Legg til gaveinnpakkingsproduktet i menyen:
Klikk på Legg til menyelement , og angi et Navn for koblingen til gaveinnpakkingsproduktet.
I Kobling -feltet velger du Produkter , og velger deretter gaveinnpakkingsproduktet fra rullegardinmenyen.
Klikk på Legg til .
Klikk på Lagre meny .
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Navigasjon .
Klikk på Legg til meny .
Navngi menyen Gift wrapping
, slik at referansen som er tilordnet menyen er gift-wrapping
.
Legg til gaveinnpakkingsproduktet i menyen:
Klikk på Legg til menyelement , og angi et Navn for koblingen til gaveinnpakkingsproduktet.
I Kobling -feltet velger du Produkter , og velger deretter gaveinnpakkingsproduktet fra rullegardinmenyen.
Klikk på Legg til .
Klikk på Lagre meny .
Opprett en kodebit
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Utdrag -katalogen klikker du på Legg til et nytt utdrag .
Gi kodebiten navnet gift-wrapping
, og klikk på Opprett kodebit . Kodebitfilen vil åpnes i koderedigeringsprogrammet.
I dette trinnet skal du lime inn litt kode i den nye gift-wrapping
-kodebitfilen. Koden du limer inn avhenger av hvordan du ønsker å belaste kundene for gaveinnpakkingstjenesten:
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Administrer temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Utdrag -katalogen klikker du på Legg til et nytt utdrag .
Gi kodebiten navnet gift-wrapping
, og klikk på Opprett kodebit . Kodebitfilen vil åpnes i koderedigeringsprogrammet.
I dette trinnet skal du lime inn litt kode i den nye gift-wrapping
-kodebitfilen. Koden du limer inn avhenger av hvordan du ønsker å belaste kundene for gaveinnpakkingstjenesten:
Trykk på … -knappen fra Shopify-appen .
I Salgskanaler -seksjonen trykker du på Nettbutikk .
Trykk på Administrer temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Utdrag -katalogen klikker du på Legg til et nytt utdrag .
Gi kodebiten navnet gift-wrapping
, og klikk på Opprett kodebit . Kodebitfilen vil åpnes i koderedigeringsprogrammet.
I dette trinnet skal du lime inn litt kode i den nye gift-wrapping
-kodebitfilen. Koden du limer inn avhenger av hvordan du ønsker å belaste kundene for gaveinnpakkingstjenesten:
Legg til en fastpris for gaveinnpakking Lim inn følgende kode og Lagre :
{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}
<div
id= "is-a-gift"
style= "clear: left; margin: 30px 0"
class= "clearfix rte"
>
<p>
<input
id= "gift-wrapping"
type= "checkbox"
name= "attributes[gift-wrapping]"
value= "yes"
{% if cart.attributes.gift-wrapping %}
checked= "checked"
{% endif %}
style= "float: none"
/>
<label
for= "gift-wrapping"
style= "display:inline; padding-left: 5px; float: none;"
>
For {{ linklists.gift-wrapping.links.first.object.price | money }}
please wrap the products in this order.
</label>
</p>
<p>
<label style= "display:block" for= "gift-note"
> Gift message (free and optional):</label
>
<textarea name= "attributes[gift-note]" id= "gift-note" >
{{ cart.attributes.gift-note }}</textarea
>
</p>
</div>
{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}
<style>
#updates_ { { id } } { display : none ; }
</style>
<script>
Shopify . Cart = Shopify . Cart || {};
Shopify . Cart . GiftWrap = {};
Shopify . Cart . GiftWrap . set = function () {
var headers = new Headers ({ ' Content-Type ' : ' application/json ' });
var request = {
method : ' POST ' ,
headers : headers ,
body : JSON . stringify ({ updates : { {{ id }}: 1 }, attributes : { ' gift-wrapping ' : true } })
};
fetch ( ' /cart/update.js ' , request )
. then ( function () {
location . href = ' /cart ' ;
});
}
Shopify . Cart . GiftWrap . remove = function () {
var headers = new Headers ({ ' Content-Type ' : ' application/json ' });
var request = {
method : ' POST ' ,
headers : headers ,
body : JSON . stringify ({ updates : { {{ id }}: 0 }, attributes : { ' gift-wrapping ' : '' , ' gift-note ' : '' } })
};
fetch ( ' /cart/update.js ' , request )
. then ( function () {
location . href = ' /cart ' ;
});
}
// If we have nothing but gift-wrap items in the cart.
{ % if cart . items . size == 1 and gift_wraps_in_cart > 0 % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . remove ();
});
// If we have more than one gift-wrap item in the cart.
{ % elsif gift_wraps_in_cart > 1 % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . set ();
});
// If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
{ % elsif gift_wraps_in_cart > 0 and cart . attributes . gift - wrapping == blank % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . set ();
});
// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
{ % elsif gift_wraps_in_cart == 0 and cart . attributes . gift - wrapping != blank % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . set ();
});
{ % endif % }
// When the gift-wrapping checkbox is checked or unchecked.
document . addEventListener ( " DOMContentLoaded " , function (){
document . querySelector ( ' [name="attributes[gift-wrapping]"] ' ). addEventListener ( " change " , function ( event ) {
if ( event . target . checked ) {
Shopify . Cart . GiftWrap . set ();
} else {
Shopify . Cart . GiftWrap . remove ();
}
});
document . querySelector ( ' #gift-note ' ). addEventListener ( " change " , function ( evt ) {
var note = evt . target . value ;
var headers = new Headers ({ ' Content-Type ' : ' application/json ' });
var request = {
method : ' POST ' ,
headers : headers ,
body : JSON . stringify ({ attributes : { ' gift-note ' : note } })
};
fetch ( ' /cart/update.js ' , request );
});
});
</script>
{% else %}
<p style= "clear: left; margin: 30px 0" class= "rte" >
You attempted to add a gift-wrapping script to your shopping cart, but it
won't work because you don't have a link list with handle
<code> gift-wrapping</code> which, in turn, contains a link to your
gift-wrapping product. Please review the steps outlined
<a
href= "https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
target= "_blank"
rel= "noopener noreferrer nofollow"
> here</a
> .
</p>
{% endif %}
Legg til en belastning som multipliseres med antall produkter i bestillingen Med dette alternativet vil, dersom det er tre produkter i bestillingen, gaveinnpakningsbelastningen multipliseres med tre. Lim inn følgende kode og Lagre :
{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}
<div
id= "is-a-gift"
style= "clear: left; margin: 30px 0"
class= "clearfix rte"
>
<p>
<input
id= "gift-wrapping"
type= "checkbox"
name= "attributes[gift-wrapping]"
value= "yes"
{% if cart.attributes.gift-wrapping %}
checked= "checked"
{% endif %}
style= "float: none"
/>
<label
for= "gift-wrapping"
style= "display:inline; padding-left: 5px; float: none;"
>
For {{ linklists.gift-wrapping.links.first.object.price | money }} per
item, please wrap the products in this order.
</label>
</p>
<p>
<label style= "display:block" for= "gift-note"
> Gift message (free and optional):</label
>
<textarea name= "attributes[gift-note]" id= "gift-note" >
{{ cart.attributes.gift-note }}</textarea
>
</p>
</div>
{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}
<style>
#updates_ { { id } } { display : none ; }
</style>
<script>
Shopify . Cart = Shopify . Cart || {};
Shopify . Cart . GiftWrap = {};
Shopify . Cart . GiftWrap . set = function () {
var headers = new Headers ({ ' Content-Type ' : ' application/json ' });
var request = {
method : ' POST ' ,
headers : headers ,
body : JSON . stringify ({ updates : { {{ id }}: {{ items_in_cart }} }, attributes : { ' gift-wrapping ' : true } })
};
fetch ( ' /cart/update.js ' , request )
. then ( function () {
location . href = ' /cart ' ;
});
}
Shopify . Cart . GiftWrap . remove = function () {
var headers = new Headers ({ ' Content-Type ' : ' application/json ' });
var request = {
method : ' POST ' ,
headers : headers ,
body : JSON . stringify ({ updates : { {{ id }}: 0 }, attributes : { ' gift-wrapping ' : '' , ' gift-note ' : '' } })
};
fetch ( ' /cart/update.js ' , request )
. then ( function () {
location . href = ' /cart ' ;
});
}
// If we have nothing but gift-wrap items in the cart.
{ % if cart . items . size == 1 and gift_wraps_in_cart > 0 % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . remove ();
});
// If we don't have the right amount of gift-wrap items in the cart.
{ % elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . set ();
});
// If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
{ % elsif gift_wraps_in_cart > 0 and cart . attributes . gift - wrapping == blank % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . set ();
});
// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
{ % elsif gift_wraps_in_cart == 0 and cart . attributes . gift - wrapping != blank % }
document . addEventListener ( " DOMContentLoaded " , function (){
Shopify . Cart . GiftWrap . set ();
});
{ % endif % }
// When the gift-wrapping checkbox is checked or unchecked.
document . addEventListener ( " DOMContentLoaded " , function (){
document . querySelector ( ' [name="attributes[gift-wrapping]"] ' ). addEventListener ( " change " , function ( event ) {
if ( event . target . checked ) {
Shopify . Cart . GiftWrap . set ();
} else {
Shopify . Cart . GiftWrap . remove ();
}
});
document . querySelector ( ' #gift-note ' ). addEventListener ( " change " , function ( evt ) {
var note = evt . target . value ;
var headers = new Headers ({ ' Content-Type ' : ' application/json ' });
var request = {
method : ' POST ' ,
headers : headers ,
body : JSON . stringify ({ attributes : { ' gift-note ' : note } })
};
fetch ( ' /cart/update.js ' , request );
});
});
</script>
{% else %}
<p style= "clear: left; margin: 30px 0" class= "rte" >
You attempted to add a gift-wrapping script to your shopping cart, but it
won't work because you don't have a link list with handle
<code> gift-wrapping</code> which, in turn, contains a link to your
gift-wrapping product. Please review the steps outlined
<a
href= "https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
target= "_blank"
rel= "noopener noreferrer nofollow"
> here</a
> .
</p>
{% endif %}
Inkluder kodebiten i handlekurvmalen Slik inkluderer du kodebiten for gaveinnpakking i handlekurvmalen:
I Seksjoner -katalogen klikker du på cart-template.liquid
. Hvis temaet ditt ikke har en cart-template.liquid
, klikker du på cart.liquid
i Maler -katalogen.
Finn den avsluttende </form>
-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </form>
-taggen:
{% render 'gift-wrapping' %}
Klikk på Lagre .