Zastąp przycisk „Dodaj do koszyka" linkiem kontaktowym

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu z Shopify, możesz skontaktować się z Pomocą techniczną Shopify, aby uzyskać pomoc w związku z tym tutorialem. Czas projektowania wynosi 15 minut. Dowiedz się więcej o Polityce projektowania Shopify.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

Możesz zastąpić przycisk Dodaj do koszyka linkiem do poczty e-mail lub formularzem kontaktowym. Przykładowo, przycisk Dodaj do koszyka możesz zastąpić w przypadku produktów, które nie są obecnie na sprzedaż lub które są wykonywane na zamówienie.

Szablony z sekcjami i bez sekcji

Uwaga

Kroki tego tutoriala różnią się w zależności od tego, czy używasz szablonu z sekcjami czy bez sekcji. Szablon z sekcjami umożliwia przeciąganie i upuszczanie elementów w celu zmiany układu strony głównej, nie jest to możliwe w przypadku szablonu bez sekcji.

Aby ustalić, czy Twój szablon obsługuje sekcje, przejdź do strony Edytuj kod. Jeśli w katalogu Sekcje są pliki, używasz szablonu z sekcjami. Szablony bez sekcji zostały zatwierdzone przed październikiem 2016 roku i nie zawierają plików w katalogu*Sekcje*.

Jeśli używasz szablonu z sekcjami, kliknij przycisk Szablony z sekcjami i zastosuj się do instrukcji. Jeśli używasz starszego szablonu, niezawierającego sekcji, kliknij przycisk Szablony bez sekcji i zastosuj się do instrukcji.

Kroki dotyczące szablonów z sekcjami

Wybierz swój szablon

Kroki tej konfiguracji różnią się w zależności od tego, czy używasz szablonu Narrative czy innego darmowego szablonu wykonanego przez aplikację Shopify. Kliknij przycisk swojego szablonu, zanim wykonasz poniższe instrukcje:

Kroki dotyczące szablonów bez sekcji

Utwórz nowy szablon produktu

Aby zastąpić przycisk Dodaj do koszyka dla produktu, musisz utworzyć niestandardowy szablon dla tego produktu.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Szablony kliknij opcję Dodaj nowy szablon.
4. Utwórz szablon produktu:
   • Z menu rozwijanego wybierz produkt.
   • Nazwij swój szablon requires-contact.
   • Kliknij Utwórz szablon.

Ukryj przycisk Dodaj do koszyka

1. W nowym pliku product.requires-contact.liquid znajdź kod HTML dla przycisku Dodaj do koszyka. Możesz wyszukać słowo cart.

Kod dla przycisku Dodaj do koszyka jest różny w zależności od szablonu. Szukaj tagu <input> lub <button> z tekstem Add to cart, AddToCart lub add-to-cart.

W przypadku szablonu Debut kod przycisku Dodaj do koszyka wygląda następująco:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Gdy znajdziesz kod, otocz go tagami Liquid {% comment %} i {% endcomment %}. Dzięki temu kod nie będzie wyświetlany w Twoim sklepie, ale będzie go można łatwo ponownie wstawić, gdy zajdzie konieczność późniejszej zmiany nowego szablonu.

W przypadku szablonu Debut zmodyfikowany kod może wyglądać następująco:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Uwaga

Upewnij się, że tagi <form> nie są oznaczone jako komentarz dla strony produktu. Tagi komentarzy nie powinny otaczać żadnych tagów <form> ani </form>. W przeciwnym razie klienci mogą napotkać błędy podczas przeglądania strony produktu.

1. Kliknij opcję Zapisz.

Dodaj link do poczty e-mail lub formularz kontaktowy

Po ukryciu przycisku Dodaj do koszyka możesz dodać zawartość, którą chcesz wyświetlić w jego miejsce.

Link do poczty e-mail

1. W nowej linii pod tagiem Liquid {% endcomment %} dodanym w ostatnim kroku dodaj kod HTML dla linku e-maila:

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. Kliknij opcję Zapisz.

Formularz kontaktowy

Możesz dodać formularz kontaktowy do nowego szablonu produktu, kopiując kod z szablonu strony kontaktowej szablonu produktu. Aby dodać formularz kontaktowy:

1. W katalogu Szablony kliknij page.contact.liquid.
2. Znajdź tag Liquid {% form 'contact' %} w pliku.
3. Skopiuj cały kod z tagu Liquid {% form 'contact' %} do tagu Liquid {% endform %}. Dołącz tagi formularza Liquid do kodu, który kopiujesz.
4. Wróć do nowego pliku product.requires-contact.liquid w katalogu Szablony.
5. Znajdź tag zamykający </form> w pliku. W nowej linii pod tagiem zamykającym </form> wklej kod dla formularza kontaktowego.
6. Następnym krokiem jest wstawienie wklejonego kodu wewnątrz tagów div HTML. Atrybut klasy zawarty w kodzie tagu div zapewni poprawne renderowanie formularza kontaktowego na stronie.

W nowej linii nad {% form 'contact' %} wklej następujący kod:

<div class="form-vertical"></div>

W nowej linii pod {% endform %} wklej następujący kod:

</div>

1. Kliknij opcję Zapisz.

Przypisz nowy szablon do produktu

Po ukończeniu szablonu możesz go przypisać do wszystkich produktów, dla których chcesz ukryć przycisk Dodaj do koszyka.

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.
2. Kliknij nazwę produktu, dla którego chcesz ukryć przycisk Dodaj do koszyka.
3. Na stronie produktu panelu administracyjnego Shopify w obszarze Sklep online wybierz nowy wzorzec wymaga kontaktu z menu rozwijanego Wzorzec szablonu.
4. Kliknij opcję Zapisz.

Powtórz te kroki dla każdego produktu, do którego chcesz dodać nowy szablon.