How to connect "Sold out" button with "Contacts" page? (Venture theme)

Jay_
Shopify Partner
94 4 17

what happens when you replace the code with the following:

<div class="page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax="{{ section.settings.enable_ajax }}" data-stock="{{ section.settings.stock_enable }}">
  {% assign product_image_size = '480x480' %}

  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '600x600' }}">
  {%- if settings.product_vendor_enable -%}
    <meta itemprop="brand" content="{{ product.vendor }}">
  {%- endif -%}

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}

  <div class="grid product-single">
    <div class="grid__item {% if product.images.size > 1 %}medium-up--three-fifths{% else %}medium-up--one-half{% endif %} cv_product_single">
   <div class="photos cv_product_template">
     <div class="photos__item--main slider-for cv_featured_image_part">
          {%- for image in product.images -%}
          <div class="Cv_main_image_part " ownn="{{forloop.index}}">
            <a data-fancybox="gallery" href="{{ image | img_url: 'master' }}" class="cv_a_product_main_image">
              <img src="{{image | img_url:'1024x'}}" src="{{ image.src | img_url: 'medium'}}" image_id="{{image.id}}">
            </a>
          </div>
          {% endfor %}
     </div>
     {% if product.images.size > 1 %}
        <div class="photos__item--thumbs Cv_thumbnail_part_image">
          <div class="slider-nav cv_thumbnail">
           {% for image in product.images %}
            <div class="cv_single_thumbnail-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}" id="imagethumb-{{image.id}}">
              <div class="cv_product_thumbnail">
              <img src="{{ image.src | img_url: '150x150'}}"alt="{{ image.alt | escape }}">
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}
      </div>
    </div>

    <div class="grid__item {% if product.images.size > 1 %}medium-up--two-fifths{% else %}medium-up--one-half{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <div class="product-single__info-wrapper">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        <div class="product-single__meta small--text-center">
          {% if settings.product_vendor_enable %}
            <p class="product-single__vendor">{{ product.vendor }}</p>
          {% endif %}

          <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

          <ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
            <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
              <div class="product-tag">
                {{ 'products.product.on_sale' | t }}
              </div>
            </li>
            <li>
              {% unless product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              {% endunless %}
              <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | money }}
              </span>
            </li>
            {% if product.compare_at_price_max > product.price %}
              <li>
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
                  {{ current_variant.compare_at_price | money }}
                </s>
              </li>
            {% endif %}
            {% comment %}Removed by RichT @ Shopify Theme Support |  February 7 2019
            {% if section.settings.stock_enable %}
              <li>
                <span id="ProductStock-{{ section.id }}" class="product-single__stock {% unless current_variant.inventory_management and current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 or  current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.incoming %} hide{% endunless %}">
                  {% if current_variant.inventory_management %}
                    {% if current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 %}
                      {% assign qty = current_variant.inventory_quantity %}
                      {{ 'products.product.stock_available' | t: count: qty }}
                    {% elsif current_variant.inventory_quantity == 0 or current_variant.inventory_quantity < 0 and current_variant.incoming %}
                      {% if current_variant.available %}
                        {% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
                        {{ 'products.product.will_not_ship_until' | t: date: date  }}
                      {% else %}
                        {% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
                        {{ 'products.product.will_be_in_stock_after' | t: date: date  }}
                      {% endif %}
                    {% endif %}
                  {% endif %}
                </span>
              </li>
            {% endif %}
            {% endcomment %}
 
            {% comment %} Added by RichT @ Shopify Theme Support | February 5 2019 {% endcomment %} 
            {% if section.settings.stock_enable %}
              <li>
                <span id="ProductStock-{{ section.id }}" class="product-single__stock">
                  {% if current_variant.inventory_management %}
                    {% if current_variant.inventory_quantity >= 2 %}
                      {{ 'products.product.custom_available' | t }}
                    {% comment %} {% elsif current_variant.inventory_quantity == 2 %}
                      {% assign qty = current_variant.inventory_quantity %}
                      {{ 'products.product.stock_available.other' | t: count: qty }} {% endcomment %} 
                    {% elsif current_variant.inventory_quantity == 1 %}
                      {% assign qty = current_variant.inventory_quantity %}
                      {{ 'products.product.stock_available.one' | t: count: qty }}
                    {% elsif current_variant.inventory_quantity <= 0 %}
           
                        {{ 'products.product.product_available_in' | t  }}
   
                    {% endif %}
                  {% endif %}
                </span>
              </li>
            {% endif %} 
            {% comment %} End of added code {% endcomment %} 

          </ul>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product-single__policies rte">
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

        </div>

        <hr>

        {% capture "form_class" %}product-form{% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}

        {% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}

        {% form 'product', product, class:form_class, id:form_id %}
          {% unless product.has_only_default_variant %}
            {% for option in product.options_with_values %}
        
              <div class="selector-wrapper js product-form__item">
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  data-index="option{{ forloop.index }}">
                  {% for value in option.values %}
                    <option image_mian_id="1" value="{{ value | escape }}" {% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
                  {% endfor %}
                </select>
              </div>
        
            {% endfor %}
          {% endunless %}

          <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js cv__hidden_js">
            {% for variant in product.variants %}
              <option variant_idd="{{variant.image.id}}" custom_attr="{{variant.title|split:'/ '|last |rstrip}}" data-image="{{ variant.image | img_url: 'master' }}"{% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                {% if variant.available %}
                  {{ variant.title }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
          <div class="product-form__item product-form__item--quantity">
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
          </div>
          <div class="product-form__item product-form__item--submit">
            <button type="submit"
              name="add"
              id="AddToCart-{{ section.id }}"
              class="btn btn--full product-form__cart-submit{% unless current_variant.available %} btn--sold-out{% endunless %}{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                
              {% comment %} 
              {% unless current_variant.available %}disabled="disabled"{% endunless %}>
              {% endcomment %} 
              
              <span id="AddToCartText-{{ section.id }}">
                {% unless current_variant.available %}
                  <a href="/pages/contact-us">Contact us</a>
      ​             {% else %}
                  {{ 'products.product.add_to_cart' | t }}
                {% endunless %}
              </span>
            </button>
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          </div>
        {% endform %}

        <hr>

  <div class="rte product-single__description" itemprop="description">
          {{ product.description }}
        </div>
        
        {% if section.settings.social_sharing_products %}
          <hr>
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  {% if section.settings.stock_enable %}
    <script type="application/json" id="VariantJson-{{ section.id }}">
      [
        {% for variant in product.variants %}
          {
             "incoming": {{ variant.incoming | default: false | json }},
             "next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }},
             "inventory_policy": {{ variant.inventory_policy | json }},
             "inventory_quantity": {{ variant.inventory_quantity | json }}
          }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    </script>
{% comment %} Added by RichT @ Shopify Theme Support | February 7 2019 {% endcomment %} 
<script>
  const stock_language = "{{ 'products.product.product_available_in' | t  }}";
  const custom_language_available = "{{ 'products.product.custom_available' | t }}";
  
</script>


<script type="text/javascript">
 $('[data-fancybox="gallery"]').fancybox({
   
  afterLoad : function(instance, current) {
    var pixelRatio = window.devicePixelRatio || 1;

//     if ( pixelRatio > 1.5 ) {
//       current.width  = current.width  / pixelRatio;
//       current.height = current.height / pixelRatio;
//     }
  },thumbs : {
    autoStart : true,
    axis      : 'x'
  }
});
</script>
<script>
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    infinite:false,
    dots: false,
    focusOnSelect: true,
    vertical:true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          vertical:false,
          horizontal:true
        }
      }
    ]
  });
 
// $('.ex1').zoom();
//   if($(window).width() < 767)
// {
//   $('.codevibez').removeClass("ex1");
//    // change functionality for smaller screens
// } else {
//    $('.ex1').zoom();
//    // change functionality for larger screens
// }


//   if (window.matchMedia('(max-width: 676px)').matches)
// {
//      $('.ex1').zoom();
// }else{

// }

  

</script>

  {% endif %}
{% endunless %}



{% schema %}
{
  "name": {
    "de": "Produktseiten",
    "en": "Product pages",
    "es": "Páginas de productos",
    "fr": "Pages de produits",
    "it": "Pagine di prodotto",
    "ja": "商品ページ",
    "pt-BR": "Páginas de produtos"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_ajax",
      "label": {
        "de": "Auf der aktuellen Seite bleiben, wenn Artikel hinzugefügt wird",
        "en": "Stay on current page when item is added to cart",
        "es": "Permanece en la página actual al agregar el artículo al carrito.",
        "fr": "Rester sur la page actuelle lorsqu'un article est ajouté au panier",
        "it": "Resta sulla stessa pagina quando l'articolo viene aggiunto al carrello",
        "ja": "アイテムがカートに追加されたときに現在のページにとどまる",
        "pt-BR": "Permanecer na página atual quando o item for adicionado ao carrinho"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "stock_enable",
      "label": "Use custom inventory messages",
       "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_payment_button",
      "label": {
        "de": "Dynamischen Checkout Button anzeigen",
        "en": "Show dynamic checkout button",
        "es": "Mostrar botón de pago dinámico",
        "fr": "Afficher le bouton de passage à la caisse dynamique",
        "it": "Mostra pulsante di check-out dinamico",
        "ja": "ダイナミックチェックアウトボタンを表示する",
        "pt-BR": "Exibir botão dinâmico de finalização da compra"
      },
      "info": {
        "de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in Ihrem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Infos](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[もっと詳しく](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "pt-BR": "Cada cliente verá seu método de pagamento preferido dentre os disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "social_sharing_products",
      "label": {
        "de": "Teilen von Produkten aktivieren",
        "en": "Enable product sharing",
        "es": "Habilitar compartir productos",
        "fr": "Activer le partage de produits",
        "it": "Permetti condivisione del prodotto",
        "ja": "商品の共有を有効にする",
        "pt-BR": "Habilite o compartilhamento de produtos"
      },
      "default": true
    }
  ]
}
{% endschema %}
Jay Friedmann | Developer @ Swiss Media
- Was my reply helpful? Click Like to let me know!
0 Likes
mattialussana
Tourist
67 0 3

Excuse me for the late reply. I tried to replace the code with the one you provided and this was the result:

img1.png

I tried to click on Buy Now button and this is what happened:

img2.png


Thanks again for your time and you help.

0 Likes
Jay_
Shopify Partner
94 4 17

It might be that we cannot show the buy now button as disabled

Jay Friedmann | Developer @ Swiss Media
- Was my reply helpful? Click Like to let me know!
0 Likes
vvcs
New Member
2 0 0

Hello again,

 

So which is the code or way to link the sold out button to a specific page?

 

0 Likes
Jay_
Shopify Partner
94 4 17

Follow the steps outlines here: https://community.shopify.com/c/Shopify-Design/How-to-connect-quot-Sold-out-quot-button-with-quot-Co...

Jay Friedmann | Developer @ Swiss Media
- Was my reply helpful? Click Like to let me know!
0 Likes