Purchase Product on Separate Page - Yotpo Subscription

[spacewaffles]

I would like to create a custom page with a custom template that has two products on it that can be purchased directly on the page. The two products are Yotpo subscriptions.

I reached out to Yotpo support who sent me this: 

We recommend that you can add the following div code

above the "Add to Cart" button of the subscription product, and the widget will be displayed:

<div class="yotpo-widget-instance" data-yotpo-instance-id="299259" should-auto-inject="false" product-handle="{{product.handle}}" widget-type="SubscriptionsAddToCartWidget" full-format-product-price="{{ product.price | money }}"></div>

Additionally, please make sure to include the following script tag:

<script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/OuwtCnpbWkUcp9RWys0el7iV9UrOuagMhAXhar1E" async></script>

Which I did. And it shows the subscription options:

But I can get it to work with a buy button. How do I put the buy button on this page if I can't embed the buy button due to the restrictions of it being a Yotpo subscriptions product:

"[The product] is marked as unavailable for the Buy Button channel."

I can mark it as available, but I am not sure if it will break the subscription setup and I don't want to do that.

Any help is appreciated... thanks.

[spacewaffles · Accepted solution]

I figured it out, so I will share what I did here in case anyone else wants to know how to do it.

First, assign the product to a variable

{% assign productvariable = all_products.the-product-handle %}

Then, include the form code from the product template, but replace references to product with your assigned variable:

{% form 'product', productvariable, data-productid: productvariable.id, id: product_form_id, class: product_form_class %}
  {% if productvariable.available %}{% render 'subscription-product' with productvariable as product %}{% endif %}
  <select name="id" data-productid="{{ productvariable.id }}" class="original-selector" aria-label="{{ productvariable.selector_label }}">
    {% for variant in productvariable.variants %}
      <option value="{{ variant.id }}"
        {% if variant == current_variant %} selected="selected"{% endif %}
        {% if variant.inventory_management != blank %}
          data-inventory="{{ variant.inventory_quantity }}"
        {% endif %}
        data-stock="{% if variant.inventory_management != blank and variant.inventory_quantity <= 0 %}out{% endif %}">{{ variant.title | escape }}
      </option>
    {% endfor %}
  </select>

  {%- if block.settings.show_tax_and_shipping -%}
    {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
      <div class="rte product-policies">
        <p>
          {%- if cart.taxes_included -%}
            {{ products.general.include_taxes }}
          {%- endif -%}
          {%- if shop.shipping_policy.body != blank -%}
            {{ products.general.shipping_policy_html }}
          {%- endif -%}
        </p>
      </div>
    {%- endif -%}
  {%- endif -%}

  <div class="product-status-message"></div>

  {%- liquid
      assign enable_dynamic_payment_button = false
      if block.settings.enable_payment_button and productvariable.selling_plan_groups == empty and is_preorder_product == false
        assign enable_dynamic_payment_button = true
      endif
  -%}

  <div class="product-detail__form__action product-detail__gap-lg
    {% if block.settings.show_quantity_selector %}product-detail__form__options--with-quantity{% endif %}
    {% if enable_dynamic_payment_button %}with-payment-button{% endif %}">
    <div class="yotpo-widget-instance" data-yotpo-instance-id="299259" should-auto-inject="false" product-handle="{{ productvariable.handle }}" widget-type="SubscriptionsAddToCartWidget" full-format-product-price="${{ productvariable.price }}"></div>
    {% if block.settings.show_quantity_selector %}
      <div class="quantity-wrapper border-radius-{{ settings.buttons_shape }}">
        <a href="#" data-quantity="down">{% render 'svg-subtract' %}</a>
        <input aria-label="{{ productvariable.quantity }}" class="select-on-focus" name="quantity" value="1" />
        <a href="#" data-quantity="up">{% render 'svg-add' %}</a>
      </div>
    {% else %}
      <input type="hidden" name="quantity" value="1" />
    {% endif %}
    
    <button class="button {% if enable_dynamic_payment_button %}alt{% endif %}" type="submit" name="add">Add to Cart</button>

    {% if enable_dynamic_payment_button %}
      {{ form | payment_button }}
    {% endif %}
  </div>
{{ form | payment_terms }}