form ​

Provided with a type, generate an HTML <form> tag that includes any required <input> to ensure successful form submition.

With the complexity of the diffrent forms the platform can have and to ease the DX, the tag supports various types, where every type is Rendered with it's requirements builtin.

{% form 'type' %}
  content
{% endform %}

• type: Name of the form you wish to render.
• content: Form content.

To start using the form tag, you can specify any of the following types:

• cart
• product
• contact

cart ​

Generates a form where upon submiting, you get redirected to the /cart page.

Example:

{% form 'cart' %}
  <button>Cart</button>
{% endform %}

<form method="get" action="/cart">
  <button>Cart</button>
</form>

product ​

Generates a form for adding a product to cart.

Form input fields ​

• id:
  • Required: true
  • Description: Product variant id you want to add to the cart.
  • Example:
  liquid

  <input type="text" name="id" value="YOUR_PRODUCT_VARIANT_ID"/>

  1
  
• quantity:
  • Required: true
  • Description: Quantity of the product you'll be adding to the cart.
  • Example:
  liquid

  <input type="number" name="quantity" value="1"/>

  1
  
• attached_image:
  • Required: false
  • Description: In cases where a product might have an image variant selector, the URL of that images can be provided here.
  • Example:
  liquid

  <input name="attached_image" value="https://cdn.youcan.shop/CUSTOMER_UPLOADED_IMAGE_URL"/>

  1
  

Example:

{% form 'product' %}
  <input type="text" name="id" value="YOUR_PRODUCT_VARIANT_ID"/>
  <input type="number" name="quantity" value="1"/>
{% endform %}

<form method="post" action="/api/cart/add">
  <input type="hidden" name="_token" value="CSRF_TOKEN" />
  <!-- content -->
  <input type="text" name="id" value="YOUR_PRODUCT_VARIANT_ID"/>
  <input type="number" name="quantity" value="1"/>
</form>

contact ​

Generates a form for submitting an email to the seller.

Form input fields ​

• email:
  • Required: true
  • Description: Customer email whomest is contacting the seller.
  • Example:
  liquid

  <input type="text" name="email" value="[email protected]"/>

  1
  
• subject:
  • Required: true
  • Description: Subject of the email.
  • Example:
  liquid

  <input type="text" name="subject" value="Question about stock availability"/>

  1
  
• message:
  • Required: true
  • Description: Message content.
  • Example:
  liquid

  <textarea name="message">
    I was condering if the product-2 is available in stock still, if not, any news about a restocking date?
  </textarea>

  1
  2
  3
  

Example:

{% form 'contact' %}
  <input type="text" name="email" value="[email protected]"/>
  <input type="text" name="subject" value="Question about stock availability"/>
  <textarea name="message">
    I was condering if the product-2 is available in stock still, if not, any news about a restocking date?
  </textarea>
{% endform %}

<form method="post" action="/contact">
  <input type="hidden" name="_token" value="CSRF_TOKEN" />
  <!-- content -->
  <input name="email" value="[email protected]"/>
  <input name="subject" value="Question about stock availability"/>
  <textarea name="message">
    I was condering if the product-2 is available in stock still, if not, any news about a restocking date?
  </textarea>
  <!-- endcontent -->
  <input type="hidden" name="h-captcha-response" value="HCAPTCHA_RESPONSE"/>
  <script src="SCRIPT_SRC" async defer></script>
</form>