ExpressionEngine's tag integration issue - html

I'm fairly new to expression engine so forgive me if this question comes across pretty obvious I have a slight problem with integrating exp:resso store tag in my temple, for some reason all
the code i apply under exp:resso's {store} tag doesn't appear on my broswer. The code below demonstrates how i have structured my EE tags, please correct me if i'm wrong...
{exp:channel:entries channel="products" limit="6" paginate="bottom"}
{exp:store:product entry_id="1" return="cart"}
<ul class="inventory">
<li class="item2"> {p_productimage}<img class="itemImg" alt="" src="{p_productimage_image}"/>{/p_productimage}
<div class="product-fam1">
<h3>{p_title}</h3>
<a class="viewItem" href="#"><img src="iamnatesmithen.com/fluotics/css/images/viewItem.jpg";</a>
</div>
</li>
</ul>
{/exp:store:product}
{/exp:channel:entries}
ExpressionEngine test site: http://www.iamnatesmithen.com/ExpressionEngine2/index.php/inventory
Current static site: http://iamnatesmithen.com/fluotics/products.html

Looks like you're not passing the product's entry id to {exp:store:product} correctly. Have you tried this? Note {exp:store:product entry_id="{entry_id}"...
{exp:channel:entries channel="products" limit="6" paginate="bottom"}
{exp:store:product entry_id="{entry_id}" return="cart"}
<!-- snip -->
{/exp:store:product}
{/exp:channel:entries}

Related

Tutorial I followed left '#' in place of links in buttons. How can I fix that if I want to host it on an actual server?

I'm a beginner in HTML and CSS and I watched this guy's tutorial on how to build a portfolio.
In the 'nav' class, he left the code as such,
<div class="nav">
<a class="a active" href="#">Home</a>
<a class="b"href="#">Gear</a>
<a class="c" href="#">Colour Dump</a>
<a class="d" href="#">BnW Dump</a>
</div>
The website he is building seems to be more of a local based html file and not meant to be hosted on actual server as there isn't any links in the buttons. How would I go about fixing this? I plan to host the website on an actual web server and I just tested it, the buttons do not lead anywhere due to a lack of buttons.
Here is a pastebin leading to my html file and
one to my css file.
My apologies if some of the classes names are misleading (i.e. do not match up to the titles), I was following his tutorial and only edited the details afterwards.
Thank you in advance for any help rendered!!
Your href links in a navigation will most likely link to another page on your website like this:
<div class="nav">
<a class="a active" href="/about">Home</a>
</div>
Another option would be an anchor link. This is the case for example if you have a single page website.
<div class="nav">
<a class="a active" href="#about">Home</a>
</div>
// Jumps to the element with the id="about"
If your nav would link to another website it would look something like this
<div class="nav">
<a class="a active" href="https://example.com">Go to Example</a>
</div>
// This link is external
Also interesting is to learn about the different attributes for links. You can find a goof read here.

Anchor links just won't work

I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>

Linking an image breaks slider

I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>

Page loads within a page, rather can completely reloading

I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?

automatically added <a> tags

I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.