The BIG on BigCommerce

Well, here is my BIG on BigCommerce! This details a bit of my frontend development. I will state it highlights some of my achievements. I performed more frontend duties/customizations but these, I think, demonstrate a good look into my skill set.

Clean Up Product Reviews

On the frontend using Stencil to edit the theme and accessing the appropriate HTML file, I inserted JavaScript Handlebars statements to remove unwanted characters in submitted product reviews. These reviews were submitted from the website’s product page.

CODE/MARKUP

#Remove unwanted characters from review submitted about product
<h5 itemprop=”name” class=”productReview-title”>{{{sanitize title}}}</h5>
<p itemprop=”reviewBody” class=”productReview-body”>{{{sanitize text}}}</p>

Custom Out of Stock Message

On the frontend using Stencil to edit the theme, the editing involved several HTML files and the creation of several as well. In accordance with the ERP communication, when stock levels reached a certain number, the message would appear in specific areas of the website primarily the product page. Other areas the message appeared was the shopping cart and module product pop-ups.

CODE/MARKUP

##From Product View File (HTML) – Appears on Product Page

## Custom-Stock-Product File {{#each product.custom_fields}} {{#each this}} {{#if this ‘==’ ‘Company_Name’}} {{/if}} {{/each}} {{/each}} {{#each product.custom_fields}} {{#if name ‘==’ ‘Available Qty’}} {{#if value ‘<=' '0'}}

Out of Stock – Pre-order today!

{{/if}} {{/if}} {{/each}} ##From Shopping Cart File – Appears on Shopping Cart Page {{#if brand.name}}

{{/if}} SKU: {{sku}} {{> components/common/custom-stock-cart}} ##Custom-Stock-Cart {{#each custom_fields}} {{#if name ‘===’ ‘Available Qty’}} {{#if value ‘<=' '0'}}

Out of Stock

Custom Fields

On the frontend using Stencil to edit the theme, I edited an HTML file to insert JavaScript Handlebar statements for custom field outputs on the product page.

CODE/MARKUP

This is Example1

This is Example2

This is Example3

This is Example4

This is Example5