I am trying to hide the cart button in the top right unless the customer is logged in. I have been able to successfully do this for other buttons by editing the navigation.html file with:
{{/if}}
{{#if settings.account_creation_enabled}}
However, when I try to do this for the cart button I keep getting an error when trying to save the file. The code is:
{{/if}}
{{#if settings.account_creation_enabled}}
<li class="navUser-item navUser-item--cart">
{{#if customer}}
<a
class="navUser-action"
data-cart-preview
data-dropdown="cart-preview-dropdown"
data-options="align:right"
href="{{urls.cart}}">
<span class="navUser-item-cartLabel">{{lang 'common.cart'}}</span> <span class="countPill{{#if cart.items}} countPill--positive{{/if}} cart-quantity">{{cart.quantity}}</span>
</a>
{{/if}}
I get this error which references the line where the {{#if statement starts:
Template parse error in templates/components/common/navigation.html. Parse error on line 51
I use this exact same code to hide other buttons, but this one not working. Anybody know what I might be doing wrong?
I'm not sure why you're starting your code snippert with {{/if}} as that should be the end of the statement. Your code as posted closes an unseen {{#if statement and doesn't close the one you've shown.
BigCommerce Handlebars Control-Flow Helpers
This would make more sense:
{{#if settings.account_creation_enabled}}
<li class="navUser-item navUser-item--cart">
{{#if customer}}
<a
class="navUser-action"
data-cart-preview
data-dropdown="cart-preview-dropdown"
data-options="align:right"
href="{{urls.cart}}">
<span class="navUser-item-cartLabel">{{lang 'common.cart'}}</span> <span class="countPill{{#if cart.items}} countPill--positive{{/if}} cart-quantity">{{cart.quantity}}</span>
</a>
{{/if}}
{{/if}}
Related
Hello I am new to selenium and trying to find an element on a dropdown that expands to a list. The xpath constantly changes so cannot use it. Also tried the full xpath and did not work either. Other drop downs that I have used I have been able to use the cssselector but really do not have much to work with in here. I have tried with 'Account Maintenance' text but it did not work or did not do it properly. If I need to provide any additional information or more html please let me know.
<li class="k-item" role="treeitem" data-uid="706aa3e9-cd95-45c3-9ad0-e990887f9484" aria- selected="true" aria-expanded="false">
<div class="k-mid">
<span class="k-icon k-i-expand">
::before
</span>
<span class="k-in k-state-selected">Account Maintenance</span>
</div>
<ul "THIS IS THE LIST THAT EXPANDS AFTER CLICKING ON THE 'Acount Maintenance' text above but not my issue </ul>
</li>
I am having this issue and I can not find my way around it without duplicating lots of code.
I have an array of entries coming from an axios request. Everything will go in an ul.
If I am doing it like this, everything is ok:
resource-index.blade.php
<ul>
<li v-for="entry in entries" :key="entry.id" >
<div>
<div>
<a :href="entry.links.show">
<x-button-icon color="gray-400">
#include('partials.svg.outline-eye')
</x-button-icon>
<span class="ml-3">{{ __('View') }}</span>
</a>
</div>
<div>
<a :href="entry.links.edit">
<x-button-icon color="gray-400">
#include('partials.svg.pencil')
</x-button-icon>
<span class="ml-3">{{ __('Edit') }}</span>
</a>
</div>
</div>
</li>
</ul>
However, in case I want to try to extract some of that stuff in different components, the details I am sending from Vue no longer get passed to the component.
resource-index.blade.php
<ul>
<li v-for="entry in entries" :key="entry.id" >
<div>
<x-grid-list-item-button label="{{ __('View') }}" :href="entry.links.show">
<x-slot name="icon">
#include('partials.svg.outline-eye')
</x-slot>
</x-grid-list-item-button>
<x-grid-list-item-button label="{{ __('Edit') }}" :href="entry.links.edit">
<x-slot name="icon">
#include('partials.svg.pencil')
</x-slot>
</x-grid-list-item-button>
</div>
</li>
</ul>
And here is the grid-list-item-button.blade.php
<div>
<a href="{{ $href }}">
#if($icon)
<x-button-icon color="gray-400">
{{ $icon }}
</x-button-icon>
#endif
<span class="ml-3">{{ $label }}</span>
</a>
</div>
I already tried:
moving the href="entry.links.show" in a named slot;
passing the data with v-bind: v-bind:href="entry.links.show";
::href="entry.links.show"
Can someone please tell what am I doing wrong or at least point me in the right direction with this?
Thanks!
If I got you right: You are trying to pass data from Vue.Js to Laravel-Components. Unfortunately this is not possible. Blade gets processed on the server-side where Vue.Js is not yet available. So the variable entry.links.show do not yet exist in Laravel (only available on client-side) and therefore cannot be passed to the Laravel-Component. After the HTML got rendered by Blade and passed to the Browser, Vue.Js can pick it up and replicate your template for the v-for and generate your list. At this point your 'link'-variables get available.
Solutions:
You could extract your code to a Vue.Js-Component rather than a Laravel-Component. This would be interpreted on client-side.
An other solution would be to generate this list through Blade so you could use Laravel-Components.
I am trying to create custom tabs in BigCommerce but didn't come across any satisfactory solution.
Here is the format of product page in which i am already getting this default tabs
Product Description
Warranty
Reviews
Other Details
I want a dynamic tab for Q&A section for a specific product.
I am aware that it can be done through the script but not able to find it. Any help would be really appreciated.
You can use the {{split}} handlebars helper to split your product description content into sections that should be displayed on different tabs.
For example, you could edit your description-tabs.html file (or the equivalent file if you are using a theme other than Cornerstone) like this to add the new tab and split the product description content into two sections:
<ul class="tabs" data-tab>
<li class="tab is-active">
<a class="tab-title" href="#tab-description">{{lang 'products.description'}}</a>
</li>
{{#if product.warranty}}
<li class="tab">
<a class="tab-title" href="#tab-warranty">{{lang 'products.warranty'}}</a>
</li>
{{/if}}
<li class="tab">
<a class="tab-title" href="#tab-faq">Q & A</a>
</li>
</ul>
<div class="tabs-contents">
<div class="tab-content is-active" id="tab-description">
{{{first (split product.description '<!-- tab -->')}}}
</div>
{{#if product.warranty}}
<div class="tab-content" id="tab-warranty">
{{{product.warranty}}}
</div>
{{/if}}
<div class="tab-content" id="tab-faq">
{{{last (split product.description '<!-- tab -->')}}}
</div>
</div>
The delimiter we're specifying is <!-- tab -->. To divide your description content among different tabs, enter your product description and your Q&A section into the product description editor with <!-- tab --> in between the sections to indicate where the content should be split among different tabs.
The above answer works however don't use '<!-- tab -->' it compiles as <!-- tab --> in source code so it will not work. Use any string with normal characters. Ex: 'splity'
I am using Classic next theme
For stencil I have a below code but this is not working in blue print.
{{#each categories}}
{{#if ../breadcrumbs.[1].name '===' name}}
{{#if children}}
<h5>{{name}}</h5>
<ul class="navList">
{{#each children}}
<li class="navList-item">
<a class="navList-action" href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{/if}}
{{/if}}
{{/each}}
The answer might be different depending on what specific Blueprint theme you are using but, I would try using the "%%SNIPPET_SubCategories%%" variable inside of the "category.html" file.
I am trying to automate a website.I am performing the following steps :
Login
LogOut.
I am able to log in successfully. After the Log in step, the Log Out option is present under a button/tab called as MyAccount. But the Log Out option is displayed when one hovers over the MyAccount button. I am trying to write the Selenium code for Log Out step. But i am consistently getting No Element Found Exception.I am using css Selector .The DOM structure of the Log Out element is :
<li class="_2sYLhZ _2mEF1S" data-reactid="31">
<a class="_1AHrFc _2k0gmP" data-reactid="32" href="/account/?rd=0&link=home_account">My Account</a>
<ul class="_1u5ANM" data-reactid="33">
<li class="_2f5Jjv" data-reactid="34">
<a class="_2k0gmP" data-reactid="35" href="/account/?rd=0&link=home_account">Account</a>
</li>
<li class="_2f5Jjv" data-reactid="36">
<a class="_2k0gmP" data-reactid="37" href="/account/orders?link=home_orders">Orders</a>
</li>
<li class="_2f5Jjv" data-reactid="38">
<a class="_2k0gmP" data-reactid="39" href="/account/wallet?link=home_wallet">Wallet</a>
</li>
<li class="_2f5Jjv" data-reactid="40">
<a class="_2k0gmP" data-reactid="41" href="/wishlist?link=home_wishlist">Wishlist</a>
</li>
<li class="_2f5Jjv" data-reactid="42">
<a class="_2k0gmP" data-reactid="43" href="/account/ebookslibrary">eBooks Library</a>
</li>
<li class="_2f5Jjv" data-reactid="44">
<a class="_2k0gmP" data-reactid="45" href="/profile?link=home_review">Reviews & Ratings</a>
</li>
<li class="_2f5Jjv" data-reactid="46">
<a class="_2k0gmP" data-reactid="47" href="/recommendations?link=home_recommendations">Recommendations</a>
</li>
<li class="_2f5Jjv" data-reactid="48">
<a class="_2k0gmP" data-reactid="49" href="/account/subscriptions?link=home_preferences">Email Preferences</a>
</li>
<li class="_2f5Jjv" data-reactid="50">
<a class="_2k0gmP" data-reactid="51" href="/account/Clickme">Click Me</a>
</li>
<li class="_2f5Jjv" data-reactid="52">
<a class="_2k0gmP" data-reactid="53" href="#">Log Out</a>
</li>
</ul>
Below is the peice of code that i am writing for the clicking the Log Out button.
driver.findElement(By.cssSelector("a[text='Log Out'])")).click();
Could someone please tell me what is the error in the css Selector code that I am using.
There is no such possibility in css selector to select element by child text node. You might use one of attributes as below:
driver.findElement(By.cssSelector("a[data-reactid='53'])")).click();
or to use search by XPath selector if you still want to use text content as identifier:
driver.findElement(By.xpath("//a[text()='Log Out'])")).click();
or by link text:
driver.findElement(By.linkText("Log Out")).click();
Try to move mouse over My Account button using selenium actions like this( Im writing c# code but am sure that methods and classes are the same in java, maybe they differ in case):
Actions action = new Actions(driver);
action.MoveToElement(myAccountElement).Perform();
Then, use webdriverwait and explicitly wait for some seconds.
Afrer waiting, find your element(logout button) and perform click.
But...instead of .click() method, use .sendKeys(keys.Enter) or .sendKeys(keys.Return)
click method sometimes do not work on elements(my personal experience on different sites)
PS: your logout link has href set to '#'.
Try this in your cssSelector:
a[href*='#'])