Jump to content

Documents are limited in Source Coding


Lynne in NY

Recommended Posts

I have a collapsible list of information that I want to use as a customized document, and it works as a straight HTML file, but when I copy the code to a new document via  the "source" view it doesn't execute (the collapses don't work). I can see that the jquery code is not executing, so I thought I would just add the HTML file and link to it, but I would like to use a kind of "wrapper" that would include the site header/footer, nav bar, etc. What would be the best approach to do that? Or better yet, is there something I can tweak so that the code will execute from within the new document?

(I wish the "Notify me of replies" button was available for the original posts.)

Link to comment
Share on other sites

So you have a new document (perhaps named Custom1) that has this "accordion" (a collapsible list). Are you using jQueryUI's Accordion(1)?

Then you have another new document (perhaps named Custom2) that has this same accordion? But the javascript is not attaching to the accordion? Or it is but the event isn't firing?

The "wrapper" idea would be implemented by putting the jQueryUI package in the skin's /js/vendor/ folder, and editing the skin's element.js_head.php template. If you use a different skin, then the main.php template would be where to put the link to the jQueryUI package.

(1) https://jqueryui.com/accordion/

Link to comment
Share on other sites

I'm not using Jquery's UI accordian, mine is hand coded, but it looks and behaves (outside of cubeart) exactly like the list in the link you sent to me.

When I cut and paste the code into a document (under CubeCarts Documents admin), it displays the list, but it doesn't "fire". Everything is static.

That is why I wanted to execute the code outside of the CubeCart documents as an HTML file that would have all the usual skin elements around it.

So... if you look at the source code for the list in the link you sent me, that's pretty close to the code in my .html file. So I'm not clear, still, how exactly do I put the code into a "wrapper"? I took these actions, what did I miss?:
1) Added a line to the element.js_head.php (in red):
{assign var=js_head value=[ 'skins/{$SKIN_FOLDER}/js/vendor/modernizr.js',
                            'skins/{$SKIN_FOLDER}/js/vendor/jquery.js',
                            'skins/{$SKIN_FOLDER}/js/vendor/collapsible.js'
]}
{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800'
{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800' debug=$CONFIG.debug||!$CONFIG.cache}
{foreach from=$HEAD_JS item=js}{$js}{/foreach}

2) Added the .js file "jquery.collapsible.js" to the skin's /js/vendor/ folder. The file contents is:

/*
 * jQuery Collapsible Plugin v1.0
 * Copyright 2020 LynSys Software Services
 */

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll.addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}


3) Created a new Document in admin and cut and pasted the HTML & Script code (partial example):

<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
<p>&nbsp;</p>

<h2>Questions about Inventory</h2>

<p>Click on a question to open or close it.</p>

<p>&nbsp;</p>

<p><button class="collapsible" type="button">Are Items that are out of stock going to be back in stock soon?</button></p>

<div class="content">
<p>Items that are unique one-of-a-kind pieces can not be replenished,<br />
although you may find similar pieces still available here and there.<br />
<br />
Items that are out of stock temporarily will be replenished as soon as possible<br />


depending on materials, supplies and artist availability.</p>
</div>

 

 

 

Link to comment
Share on other sites

OMG! I just realized the changes I made above took the whole store down outside of Admin. So I backed it all out.

Error log:

  [<strong>Exception</strong>] /home2/************/public_html/includes/lib/smarty/sysplugins/smarty_internal_templatecompilerbase.php:6 - Syntax error in template "file:/home2/***********/public_html/skins/foundation/templates/element.js_head.php" on line 6 "{foreach from=$HEAD_JS item=js}{$js}{/foreach}" too many shorthand attributes
   
Link to comment
Share on other sites

I am concerned about this:

{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800'
{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800' debug=$CONFIG.debug||!$CONFIG.cache}

It should be only:

{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800' debug=$CONFIG.debug||!$CONFIG.cache}

 

Link to comment
Share on other sites

1 hour ago, bsmither said:

I am concerned about this:


{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800'
{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800' debug=$CONFIG.debug||!$CONFIG.cache}

It should be only:

{combine input=$js_head output='cache/js_head.{$SKIN_FOLDER}.js' age='604800' debug=$CONFIG.debug||!$CONFIG.cache}

 

I'm  a twitch confused about your concern... those lines of code are not changes I made, those are the original lines. I've never before done anything to change that file. What is it that concerns you?

 

 

Link to comment
Share on other sites

The first line is incomplete, and even if it were, is redundant when the second line is taken into account.

Specifically, the firsty line is missing the closing brace, which means what follows is inadvertently considered part of that combine command, and that means there are too many attributes for the combine command. By eliminating the incomplete statement, what is left is the complete and correct statement

I urge you to examine a fresh download of a CubeCart package and compare the file in the package with your copy.

Link to comment
Share on other sites

??? I don't know what to say. Are we downloading 2 different things??? The version I dowloaded today (3/8/2020) says the date of the download zip is as of 2/27/2020. Is your version different from that date?

 

 

p.s. The original problem kind of doesn't matter to me anymore, I hand coded a less sophisticated document that works.

 

Link to comment
Share on other sites

Okay, I just went through the steps again and took screen snaps. When I was prompted to overwrite the files I chose "Yes to all", but I am still getting different results than you are.

What on earth is going on??

Untitled.jpg

Link to comment
Share on other sites

The screen capture of your Notepad is not what is in your earlier posts. Although, that image did cut off the right-most content of the longest line, and that line wrapped so that the last part - but not all of the cutoff characters - is on the next line. That's no big deal - wrapping text happens all the time.

However, compared to what we have been talking about, view the post at Friday at 04:41 PM. In that post above, you will see there are two lines that start with {combine.

Link to comment
Share on other sites

Oh. Geez.... you're right and I've gone code blind. 🙄

So, do you think that is why the .js code wasn't executing properly? 🤨

If so, I'll go through the motions of trying to get it to work using this version of the js file. If you don't think that was the problem, then... I need to to carry on, and move along! 😁

Link to comment
Share on other sites

The bad template code would have caused an error - and indeed you did get that error.

Am I to think that the document's javascript should work as you are creating the document in CubeCart's admin? Or did I misunderstand something you said?

Is this document visible at a web address we can see?

Link to comment
Share on other sites

I was thinking that yes, the javascript should work as I am creating the document in CubeCarts admin. Though I can't see it as anything other than admin until I make it live and link to it. So It's a "test" document, but I haven't included it beyond what I can open within the admin, which is where the content does not work. So in other words ... if you go back to where I posted the source code, that was the code I entered in the "test" document. But then I changed it around to meet the requirements you mentioned, and it still didn't work when viewing in Admin. But now I've backed out all my changes that you mentioned so that all is left is just str8 HTML in the "test" document and in the actual document.

Frankly? I gave up trying to be "cool" and just went with "yawn" in order to get the information out there asap in a format that worked.

SO the original "Notepad" code (content abbreviated) is this, that I copied into a document as source code, it works as an external HTML file:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p><span style="font-size:16px;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: rgb(255, 255, 255);"><strong><a href="http://aucontrairearts.com/index.php" target="_self">Home</a></strong>&nbsp;&nbsp;&nbsp;<strong> <a href="http://aucontrairearts.com/about-us.html" target="_self">About Us</a></strong>&nbsp;&nbsp;&nbsp; <strong><a href="http://aucontrairearts.com/contact-us.html" target="_self">Contact</a></strong> </span></span></span></p>

<p><img alt="" src="http://aucontraireart.com/images/homepagecollage.jpg" /><br />


<p><h2>Questions about Inventory</h2>Click on a question to open or close it.</p>

<button type="button" class="collapsible">Are Items that are out of stock going to be back in stock soon?</button>
<div class="content">
  <p>Items that are unique one-of-a-kind pieces can not be replenished,
<br />although you may find similar pieces still available here and there.
<br /><br />
Items that are out of stock temporarily will be replenished as soon as possible
<br />depending on materials, supplies and artist availability.</div>


<button type="button" class="collapsible">How do I find who the artist is for a piece?</button>
<div class="content">
  <p>On the page that displays the product details, click on the "Specification" tab.
<br />That will show you the Artists name and the in stock quantity.</div>

 

<p><h2>Questions about Orders</h2>Click on a question to open or close it.</p>


<button type="button" class="collapsible">Do I have to pay sales tax?</button>
<button type="button" class="collapsible">Why did my order get cancelled?</button>
<div class="content">
  <p>Probably due to non-payment. Because our inventory has so many one of a kind pieces
<br />or very limited stock, we expect that payment will be made within 10 days of initiating an order.
<br />After 10 days we cancel the order so that the unpaid for pieces can be returned to stock and
<br />be available to other buyers.
</div>

 

<p><h2>Questions about Shipping</h2>Click on a question to open or close it.</p>

<button type="button" class="collapsible">Do you ship outside the USA?</button>
<div class="content">
  <p>Not through the online store, but if you want to order something contact us <br />
directly to arrange for placing an order and shipping. In this case, the cost of the<br />
order will be reduced by the default shipping costs, and the new shipping costs will be added.</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll.addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...